<div class="card mb-4" ng-if=$ctrl.additionalData>
    <h6 class="card-header">
        Additional Data Columns
        <a class="btn-link text-primary btn-sm float-end py-0" data-bs-toggle="collapse"
            data-bs-target="#DefaultAttributeBody" role="button" aria-expanded="false"
            aria-controls="MixDatabasesBody collapse">
            <span class="far fa-minus-square text-primary"></span> Show/Hide</a>
    </h6>
    <div id="DefaultAttributeBody" class="card-body collapse-x">
        <div class="alert alert-warning mb-3" role="alert">
            <em class="fas fa-exclamation-triangle text-warning me-3"></em> No column
            has been created for this table yet!
        </div>
        <div dnd-list="$ctrl.additionalData.columns" dnd-inserted="$ctrl.updateOrders(index)">
            <div ng-repeat="col in $ctrl.additionalData.columns track by $index" ng-if="col!==null" dnd-draggable="col"
                dnd-type="'col'" dnd-effect-allowed="copyMove" dnd-selected="$ctrl.selectedCol = col"
                dnd-dragstart="$ctrl.dragStart($index)" ng-class="{'selected': $ctrl.selectedCol === col}">
                <div class="row">
                    <div class="col-md-1">
                        <small class="fa fa-grip-vertical fa-xs text-black-50 align-middle"
                            style="cursor: grab; height: 12px; margin-bottom: 4px"></small>
                    </div>
                    <div class="mb-3x col-md-4">
                        <small class="form-label">Column: <span class="text-black-50" ng-bind="col.name"></span></small>
                        <input ng-model="col.title" placeholder="Title" ng-change="$ctrl.generateName(col)"
                            class="form-control form-control-sm" />
                    </div>
                    <div class="mb-3x col-md-2">
                        <small class="form-label">Type {{col.dataType}}</small>
                        <mix-select model="col.dataType" options="$ctrl.localizeSettings.dataTypes"
                            callback="$ctrl.changeDataType(type)"></mix-select>
                    </div>
                    <div class="mb-3x col-md-3">
                        <div class="" ng-if="col.dataType != 'Reference'">
                            <small class="form-label">Value</small>
                            <mix-value-editor string-value="col.defaultValue" type="col.dataType">
                            </mix-value-editor>
                        </div>
                        <div ng-if="col.dataType == 'Reference'">
                            <small>
                                Attribute [
                                <a ng-click="$ctrl.showReferences(col)" class="btn-link text-primary">Select</a>
                                ]
                            </small>
                            <br />
                            <a ng-if="col.referenceId" href="/portal/mix-database/details/{{col.referenceId}}"
                                class="btn btn-link"><small>
                                    <span class="fas fa-pen text-primary"></span> Edit table
                                    {{col.reference.title}}</small>
                            </a>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="btn-group btn-group-sm float-end">
                            <a href="" class="btn btn-primary text-white"
                                ng-click="col.showAdvanced = !col.showAdvanced">
                                <span class="far fa-check-square"></span>
                            </a>
                            <a class="btn btn-outline-primary" ng-if="col.mixDatabaseName === 'sys_additional_column'"
                                ng-click="$ctrl.removeAttribute(col, $index)">
                                <span class="fas fa-trash-alt"></span>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="my-2" ng-show="col.showAdvanced">
                    <div class="row">
                        <div class="col-md-1"></div>
                        <div class="col-md form-check-inline px-2">
                            <div class="form-check form-switch mx-2">
                                <input type="checkbox" class="form-check-input" ng-model="col.isEncrypt"
                                    id="{{'isEncrypt_' + $index}}" />
                                <label class="custom-control-label" for="{{'isEncrypt_' + $index}}">
                                    Encrypt
                                </label>
                            </div>
                            <div class="form-check form-switch mx-2">
                                <input type="checkbox" class="form-check-input" ng-model="col.isUnique"
                                    id="{{'unique_' + $index}}" />
                                <label class="custom-control-label" for="{{'unique_' + $index}}">
                                    Unique
                                </label>
                            </div>
                            <div class="form-check form-switch mx-2">
                                <input type="checkbox" class="form-check-input" ng-model="col.isRequire"
                                    id="{{'required_' + $index}}" />
                                <label class="custom-control-label" for="{{'required_' + $index}}">
                                    Required
                                </label>
                            </div>
                            <div class="form-check form-switch mx-2">
                                <input type="checkbox" class="form-check-input" ng-model="col.isSelect"
                                    id="{{'select_' + $index}}" />
                                <label class="custom-control-label" for="{{'select_' + $index}}">
                                    Select
                                </label>
                            </div>
                            <div class="form-check form-switch mx-2">
                                <input type="checkbox" class="form-check-input" ng-model="col.isMultiple"
                                    id="{{'multiple_' + $index}}" />
                                <label class="custom-control-label" for="{{'multiple_' + $index}}">
                                    Select
                                </label>
                            </div>
                            <div class="form-check form-switch mx-2">
                                <input type="checkbox" class="form-check-input" ng-click="col.isRegex = !col.isRegex"
                                    id="{{'regex_' + $index}}" />
                                <label class="custom-control-label" for="{{'regex_' + $index}}">
                                    Regex
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-3" ng-show="col.dataType=='Upload'">
                        <div class="form-check form-switch mx-2">
                            <input type="checkbox" class="form-check-input"
                                ng-model="col.columnConfigurations.upload.isCrop" id="{{'isCrop_' + $index}}" />
                            <label class="custom-control-label" for="{{'isCrop_' + $index}}">
                                Crop
                            </label>
                        </div>
                        <div class="col-md-3">
                            <span>Width</span>
                            <input type="number" ng-model="col.columnConfigurations.upload.width" class="sm-control" />
                        </div>
                        <div class="col-md-3">
                            <span>Height</span>
                            <input type="number" ng-model="col.columnConfigurations.upload.height" class="sm-control" />
                        </div>
                    </div>
                </div>

                <div class="row mb-3" ng-show="col.isRegex">
                    <div class="col-md-1"></div>
                    <div class="col">
                        <input type="text" class="col form-control form-control-sm" ng-model="col.regex"
                            placeholder="Regular Expression..." />
                    </div>
                </div>
                <div ng-show="col.isSelect">
                    <div class="row mb-2">
                        <div class="col-md-1"></div>
                        <div class="col">
                            <div class="mb-3">
                                <input type="text" class="form-control form-control-sm" id="option_{{$index}}"
                                    ng-enter="$ctrl.addOption(col,$index)"
                                    placeholder="Please type in the value then enter to add to option list..." />
                            </div>

                            <div class="row" ng-repeat="opt in col.options track by $index">
                                <div class="mb-3x col-md pl-4">
                                    <input type="text" class="form-control form-control-sm"
                                        ng-model="col.options[$index].value" />
                                </div>
                                <div class="mb-3x col-md-3">
                                    <mix-select model="col.options[$index].dataType"
                                        options="$ctrl.localizeSettings.dataTypes"></mix-select>
                                </div>
                                <div class="mb-3x col-md-1">
                                    <a class="btn btn-sm" ng-click="col.options.splice($index,1)">
                                        <span class="fas fa-trash-alt text-danger"></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <hr />
            </div>
        </div>
        <div class="row" ng-show="col.showAdvanced">
            <div class="col-md-1"></div>
            <div class="col-md-2">
                <span class="form-check form-switch">
                    <input type="checkbox" ng-model="col.isEncrypt" />
                    <label class="custom-control-label">
                        <span>Encrypt</span>
                    </label>
                </span>
            </div>
            <div class="col-md-2">
                <span class="form-check form-switch">
                    <input type="checkbox" ng-model="col.isUnique" />
                    <label class="custom-control-label">
                        <span>Unique</span>
                    </label>
                </span>
            </div>
            <div class="col-md-2">
                <span class="form-check form-switch">
                    <input type="checkbox" ng-model="col.isRequire" />
                    <label class="custom-control-label">
                        <span>Required</span>
                    </label>
                </span>
            </div>
            <div class="col-md-2">
                <span class="form-check form-switch">
                    <input type="checkbox" ng-model="col.isSelect" />
                    <label class="custom-control-label">
                        <span>Select</span>
                    </label>
                </span>
            </div>
        </div>
        <div ng-show="col.isSelect">
            <div class="row">
                <label class="col-sm-3 col-form-label">Title</label>
                <div class="col-sm-7">
                    <input type="text" class="form-control form-control-sm" id="option_{{$index}}"
                        ng-enter="$ctrl.addOption(col,$index)" placeholder="fill then enter to add options" />
                </div>
            </div>
            <div class="row" ng-repeat="opt in col.options track by $index">
                <div class="col-md-10 row">
                    <input type="text" class="col-7 form-control form-control-sm"
                        ng-model="col.options[$index].value" />
                    <mix-select model="col.options[$index].dataType" options="$ctrl.localizeSettings.dataTypes">
                    </mix-select>
                    <hr />
                </div>
            </div>
        </div>

        <div class="row">
            <!-- <div class="col-md-1">
                      <small class="fa fa-grip-vertical fa-xs text-black-50 align-middle" style="cursor: grab"></small>
                  </div> -->
            <div class="mb-3x col-md-7">
                <small class="form-label">Column:
                    <span class="text-black-50" ng-bind="$ctrl.column.name"></span></small>
                <input ng-model="$ctrl.column.title" placeholder="Title" ng-change="$ctrl.generateName($ctrl.column)"
                    ng-enter="$ctrl.addAttr()" class="form-control form-control-sm" />
            </div>
            <div class="mb-3x col-md-3">
                <small class="form-label">Type</small>
                <mix-select model="$ctrl.column.dataType" options="$ctrl.localizeSettings.dataTypes"
                    callback="$ctrl.changeDataType(type)">
                </mix-select>
            </div>
            <div class="col-md-2">
                <a ng-click="$ctrl.addAttr()" class="btn btn-link btn-sm float-end text-primary"><span
                        class="fas fa-plus"></span> Add column</a>
            </div>
        </div>
    </div>
</div>
<modal-navs model-name="'mix-database'" is-global="'true'" view-type="'read'" selects="'id,title,createdDateTime'"
    is-single="'true'" save="$ctrl.referenceCallback(selected)"></modal-navs>